import React, { useEffect, useState } from 'react';
import NavBar from "@/components/NavBar";
import { Text, View, TouchableOpacity, StyleSheet, Image,ScrollView } from "react-native";
import tw from 'twrnc';
import { router,useRouter } from 'expo-router';
// import { Image } from 'expo-image';
import * as SecureStore from 'expo-secure-store';
import { AntDesign } from "@expo/vector-icons";


export default function MyScreen({ route }) {
  const router = useRouter();

  const { id } = route.params || ''
  const [userInfo, setUserInfo] = useState(null)

  const getUserInfo = async () => {
    if (id) {
      let userList = JSON.parse(await SecureStore.getItemAsync('userList'));
      let userInfo = userList.find(user => user.id === id);
      setUserInfo(userInfo)
    }else{
      let phoneNumber = await SecureStore.getItemAsync('phoneNumber')
      let userList = JSON.parse(await SecureStore.getItemAsync('userList'));
      let userInfo = userList.find(user => user.phoneNumber === phoneNumber);
      setUserInfo(userInfo)
    }
  }

  


  useEffect(()=>{
    getUserInfo()
  },[userInfo])

  return (
    <ScrollView style={styles.container}>
      {/* 顶部设置按钮 */}
      <TouchableOpacity onPress={() => router.push("/(tabs)/my")} style={styles.settingContainer}>
        <AntDesign name="setting" size={24} color="black" onPress={()=>{router.push('/my/settings')}}/>
      </TouchableOpacity>

      {/* 用户信息区域 */}

      <View style={styles.userInfoContainer}>
        <Image source={{ uri: userInfo ? userInfo?.avatar : 'https://tse4-mm.cn.bing.net/th/id/OIP-C.j57souiFOvYA0LUiw-2BkAHaHa?rs=1&pid=ImgDetMain' }} style={styles.avatar} alt="User Avatar" />
        <Text style={styles.userName}>{userInfo?.nickname}</Text>
        <Text style={styles.userId}>{userInfo?.id}</Text>
        <Text style={styles.signature}>签名：写一句话介绍自己吧</Text>
      </View>

      {/* 关注和粉丝数量 */}
      <View style={styles.statsContainer}>
        <TouchableOpacity style={styles.statBox}>
          <Text style={styles.statNumber}>0</Text>
          <Text style={styles.statLabel}>关注</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.statBox}>
          <Text style={styles.statNumber}>2</Text>
          <Text style={styles.statLabel}>粉丝</Text>
        </TouchableOpacity>
      </View>


      <View style={styles.servicesContainer}>
        <View style={styles.serviceRow}>
          <TouchableOpacity style={styles.serviceItem1}
            onPress={() => {
              router.push('/my/diamond')
            }}
          >
            <Image source={require('../../assets/images/grid/1-1.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>钻石余额</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.serviceItem1}
            onPress={() => {
              router.push('/my/vip')
            }}
          >
            <Image source={require('../../assets/images/grid/1-2.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>我的会员</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.serviceItem1}
            onPress={() => {
              router.push('/my/translations')
            }}
          >
            <Image source={require('../../assets/images/grid/1-3.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>翻译包</Text>
          </TouchableOpacity>
        </View>
      </View>

      {/* 常用服务 */}
      <View style={styles.servicesContainer}>
        <Text style={styles.serviceTitle}>常用服务</Text>
        <View style={styles.serviceRow}>
          <TouchableOpacity style={styles.serviceItem}
            onPress={() => {
              router.push('/my/income')
            }}
          >
            <Image source={require('../../assets/images/grid/2-1.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>收益明细</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.serviceItem}
            onPress={() => {
              router.push('/my/consumer')
            }}
          >
            <Image source={require('../../assets/images/grid/2-2.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>消费明细</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.serviceItem}>
            <Image source={require('../../assets/images/grid/2-3.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>认证中心</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.serviceRow}>
          <TouchableOpacity style={styles.serviceItem}>
            <Image source={require('../../assets/images/grid/2-4.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>领取奖励</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.serviceItem}>
            <Image source={require('../../assets/images/grid/2-5.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>帮助中心</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.serviceItem}>
            <Image source={require('../../assets/images/grid/2-6.png')} style={styles.serviceIcon} />
            <Text style={styles.serviceText}>联系客服</Text>
          </TouchableOpacity>
        </View>
      </View>


    </ScrollView>
  );
}

const styles = StyleSheet.create({
  settingContainer: {
    position: "absolute",
    top: 20,
    right: 10,
    zIndex: 1,
  },
  container: {
    backgroundColor: '#f7f7f7',
    flex: 1,
  },
  userInfoContainer: {
    marginTop: 50,
    alignItems: 'center',
    paddingVertical: 20,
    borderColor: '#ddd',
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginBottom: 10,
  },
  userName: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  userId: {
    color: '#666',
    marginBottom: 5,
  },
  signature: {
    color: '#666',
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 10,
    borderColor: '#ddd',
  },
  statBox: {
    alignItems: 'center',
  },
  statNumber: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  statLabel: {
    color: '#666',
  },
  servicesContainer: {
    padding: 10,
  },
  serviceRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  serviceItem: {
    alignItems: 'center',
    width: '32%',
    borderRadius: 10,
    paddingVertical: 10,
    backgroundColor: '#fff',
  },
  serviceItem1: {
    alignItems: 'center',
    width: '32%',
    borderRadius: 10,
    paddingVertical: 10,
    backgroundColor: '#fff',
  },
  serviceTitle: {
    fontSize: 16,
    marginBottom: 5,
  },
  serviceIcon: {
    width: 50,
    height: 50,
  },
  serviceText: {
    marginTop: 5,
    fontSize: 14,
    color: '#666',
  },
  bottomNav: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 60,
    borderTopWidth: 1,
    borderColor: '#ddd',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  navItem: {
    alignItems: 'center',
  },
});
